<script setup>
import { ref, computed } from 'vue';

const title = "技术社区";
const activeIndex = 0;
const activeName = 1;
const input = "";

const user = {
  name: "张三",
  username: "admin",
  age: 18,
  gender: "男",
  hobby: "前端开发工程师",
  job: "<h4>程序员的一天</h4><ul><li>需求分析</li><li>编程开发</li><li>测试部署</li></ul>",
  totalPrice: 0,
};

// 商品列表
const productList = [
  { type: "徽章", name: "[IT社区文创]《代码奔奔闪耀》荣誉徽章", price: 10, stock: 200, img: "/images/product01.png" },
  { type: "帆布包", name: "[IT社区文创]《极客主义》帆布包", price: 50, stock: 100, img: "/images/product02.png" },
  { type: "T恤", name: "蓝底魔纹_解放IT新风尚_一百搭T恤", price: 60, stock: 100, img: "/images/product03.png" },
  { type: "笔记本", name: "高端皮质IT笔记本_简约设计尽显专业气质", price: 30, stock: 50, img: "/images/product04.png" },
];

const cartItems = ref([]);

const addToCart = (item) => {
  const cartItem = cartItems.value.find(ci => ci.name === item.name);
  if (cartItem) {
    cartItem.count++;
  } else {
    cartItems.value.push({ ...item, count: 1 });
  }
  // 计算总价
  // calcPrice();
};

const handleChange = (item) => {
  if (item.count <= 0) {
    const index = cartItems.value.indexOf(item);
    if (index > -1) {
      cartItems.value.splice(index, 1);
    }
  }
  // calcPrice();
};

const totalPrice = computed(() => {
  return cartItems.value.reduce((total, item) => {
    return total = total + item.price * item.count;
  }, 0);
});
</script>

<template>
  <el-container class="main">
    <el-main>
      <!-- 商品列表 -->
      <el-row :gutter="8">
        <el-col :span="8" v-for="(item, i) in productList" :key="i" style="padding-bottom: 8px">
          <el-card>
            <img :src="item.img" style="width: 100%" />
            <p>{{ item.name }}</p>
            <el-row>
              <el-col :span="12">价格: {{ item.price }}</el-col>
              <el-col :span="12">库存: {{ item.stock }}</el-col>
            </el-row>
            <el-button @click="addToCart(item)">加入购物车</el-button>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <el-aside>
      <el-card>
        <h2>购物车</h2>
        <div v-if="cartItems.length > 0">
          <div v-for="(item, i) in cartItems" :key="i">
            <el-row>
              <el-col :span="6"><img :src="item.img" style="width: 100%" /></el-col>
              <el-col :span="18">{{ item.name }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">价格: {{ item.price }}</el-col>
              <el-col :span="12">
                <el-input-number v-model="item.count" @click="handleChange(item)" size="small" :min="0" :max="item.stock" style="float: right" />
              </el-col>
            </el-row>
            <el-divider />
          </div>
        </div>
        <el-empty v-else></el-empty>
        <el-row>
          <el-col :span="16">总价: {{ totalPrice }}</el-col>
          <el-col :span="8"><el-button type="primary">结算</el-button></el-col>
        </el-row>
      </el-card>
    </el-aside>
  </el-container>
</template>

<style></style>